<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/js/jquery-3.6.3.js}"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossOrigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
          crossOrigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
            crossOrigin="anonymous"></script>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 class="display-4">自如业主</h1>
        <p class="lead">做全世界受人尊重和喜爱的,提供高品质居住体验的科技公司-----ziroom</p>
    </div>
</div>
<div class="container-fluid">
    <div class="row " style="font-size: 40px">
        <div class="col-1"></div>
        <div class="col-10">
            <ul class="nav ">
                <li class="nav-item">
                    <a class="nav-link " href="/ziroom_portal/owner/goToRent">一键出租</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/ziroom_portal/owner/goToIntroduce">自如实力</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/ziroom_portal/owner/goToMyHouse">我的房子</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link " href="/ziroom_portal/owner/goToIncome">收益明细</a>
                </li>

            </ul>
        </div>
        <div class="col-1"></div>
    </div>
    <div class="row">
        <div class=" col-2"></div>
        <div class="card col-8 ">
            <h5 class="card-header">一键出租</h5>
            <div class="card-body">
                <form action="/ziroom_portal/owner/goToContract" method="post">
                    <h5 class="card-title" style="color: green">请选择您房子类型----立即估价</h5>
                    <div class="form-group row">
                        <label for="normalPrice" class="col-sm-2 col-form-label">小区普租价格</label>
                        <div class="col-sm-4">
                            <input type="text" readonly class="form-control-plaintext " style="color: olive"
                                   id="normalPrice"  name="normalPrice" value="输入完成自动显示">
                        </div>
                        <button type="button" class="btn btn-primary" data-toggle="modal" id="duibi"  onclick="contrast()" data-target="#exampleModal">
                            查看收益对比
                        </button>
                        <button type="submit" class="btn btn-success">立即签约</button>
                    </div>
                    <div class="form-group row">
                        <label for="ziroomPrice" class="col-sm-2 col-form-label">自如出租价格</label>
                        <div class="col-sm-4">
                            <input type="text" readonly class="form-control-plaintext" style="color: red"
                                   id="ziroomPrice" name="ziroomPrice" value="输入完成自动显示" >
                        </div>
                        <label for="engineeringPrice" class="col-sm-2 col-form-label">预计投入价格</label>
                        <div class="col-sm-4">
                            <input type="text" readonly class="form-control-plaintext" style="color: red"
                                   id="engineeringPrice" name="engineeringPrice" value="输入完成自动显示" >
                        </div>
                    </div>


                    <div class="form-group row">
                        <label for="quarter">请选择您的小区:</label>
                        <select id="quarter" name="quartername" class="form-control">
                            <option>请选择</option>
                            <option th:each="quartersList,quartersListSat:${quartersList}"
                                    th:text="${quartersList.getName()}"
                                    th:value="${quartersList.getPriceRatio()}"></option>
                        </select>
                    </div>

                    <div class="form-group row">
                        <label for="roomtype">请选择您的户型:</label>
                        <select id="roomtype" class="form-control" name="roomtype">
                            <option value="0">请选择</option>
                            <option value="1">一室一厅</option>
                            <option value="1.5">一室两厅</option>
                            <option value="2">两室一厅</option>
                            <option value="2.5">两室两厅</option>
                        </select>
                    </div>

                    <div class="form-group row">
                        <label for="direction">请选择您的户型:</label>
                        <select id="direction" class="form-control" name="direction">
                            <option value="南">朝南</option>
                            <option value="北">朝北</option>
                            <option value="东">朝东</option>
                            <option value="西">朝西</option>
                        </select>
                    </div>


                    <div class="form-group row">
                        <label for="houseLevel">请选择您的装修等级:</label>
                        <select id="houseLevel" class="form-control">
                            <option value="0">请选择</option>
                            <option value="1">毛坯房</option>
                            <option value="1">老旧房</option>
                            <option value="1">简装房</option>
                            <option value="1">精装房</option>
                        </select>
                    </div>

                    <div class="form-group row">
                        <label for="area">请输入您的面积:</label>
                        <input type="text" class="form-control" name="area" id="area">
                    </div>
                </form>


                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">收益对比情况1-5年</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">



                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th scope="col">签约年限</th>
                                        <th scope="col">普通出租</th>
                                        <th scope="col">自如出租</th>
                                        <th scope="col">装修金额</th>
                                        <th scope="col">收益差额</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <th scope="row">第一年</th>
                                        <td id="a1"></td>
                                        <td id="b1"></td>
                                        <td id="c1"></td>
                                        <td id="d1" style="background-color: green"></td>
                                    </tr>

                                    <tr>
                                        <th  e="row">第二年</th>
                                        <td  id="a2"></td>
                                        <td  id="b2"></td>
                                        <td  id="c2"></td>
                                        <td  id="d2" style="background-color: green"></td>
                                    </tr>

                                    <tr>
                                        <th  e="row">第三年</th>
                                        <td  id="a3" ></td>
                                        <td  id="b3" ></td>
                                        <td  id="c3" ></td>
                                        <td  id="d3" style="background-color: green"></td>
                                    </tr>

                                    <tr>
                                        <th scope="row">第四年</th>
                                        <td  id="a4"></td>
                                        <td  id="b4"></td>
                                        <td  id="c4"></td>
                                        <td  id="d4" style="background-color: green"></td>
                                    </tr>

                                    <tr>
                                        <th scope="row">第五年</th>
                                        <td  id="a5"></td>
                                        <td  id="b5"></td>
                                        <td  id="c5"></td>
                                        <td  id="d5" style="background-color: green"></td>
                                    </tr>

                                    </tbody>
                                </table>







                            </div>
                            <div class="modal-footer">
                                <button  type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>


<script>
    $(function () {


        $("#area").change(function (){
            let normalPrice =1
            let ziroomPrice=1
            let engineeringPrice=1
            normalPrice=$("#houseLevel").val()*$("#roomtype").val()*$("#quarter").val()*$("#area").val()*5
            ziroomPrice=normalPrice*1.3
            engineeringPrice=$("#area").val()*495

            $("#normalPrice").val(normalPrice)
            $("#ziroomPrice").val(ziroomPrice)
            $("#engineeringPrice").val(engineeringPrice)

        })

        $("#duibi").click(function (){
            let normalPrice = $("#normalPrice").val()
            let ziroomPrice= $("#ziroomPrice").val()
            let engineeringPrice= $("#engineeringPrice").val()

            $("#a1").text(normalPrice*12)
            $("#b1").text(ziroomPrice*12)
            $("#c1").text(engineeringPrice)
            $("#d1").text(ziroomPrice*12-normalPrice*12-engineeringPrice)

            $("#a2").text(normalPrice*24)
            $("#b2").text(ziroomPrice*24)
            $("#c2").text(engineeringPrice)
            $("#d2").text(ziroomPrice*24-normalPrice*24-engineeringPrice)

            $("#a3").text(normalPrice*36)
            $("#b3").text(ziroomPrice*36)
            $("#c3").text(engineeringPrice)
            $("#d3").text(ziroomPrice*36-normalPrice*36-engineeringPrice)

            $("#a4").text(normalPrice*48)
            $("#b4").text(ziroomPrice*48)
            $("#c4").text(engineeringPrice)
            $("#d4").text(ziroomPrice*48-normalPrice*48-engineeringPrice)

            $("#a5").text(normalPrice*60)
            $("#b5").text(ziroomPrice*60)
            $("#c5").text(engineeringPrice)
            $("#d5").text(ziroomPrice*60-normalPrice*60-engineeringPrice)

        })


    })




</script>

</body>
</html>